<template>
  <div class="picking zy-content ">
    <back-level @click="close"/>
    <Card :title="$t('spareParts.PurchasingInformation')" class="detail-content-layout">
      <!--    <Card :title="`${$t('maintenance.ViewingPurchaseorder')}`" class="picking zy-content ">-->
      <!--      <div slot="extra" @click.prevent="close">-->
      <!--        <Icon type="ios-close-circle-outline" size="20" />-->
      <!--      </div>-->
      <div class="basic-info">
        <!--        <div class="basic-info-title">-->
        <!--          <h2>{{ $t('spareParts.PurchasingInformation') }}</h2>&lt;!&ndash; 采购信息 &ndash;&gt;-->
        <!--        </div>-->
        <div class="basic-info-body">
          <Row style="border-bottom: 1px solid #eeeeee">
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.PurchasingNo') }}</Col><!-- 采购订单号 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.purchaseOrderNo }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.PartNo') }}</Col><!-- 料号 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.materielNo }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.Specification') }}</Col><!-- 规格 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.specification }}</Col>
              </Row>
            </Col>
          </Row>
          <Row style=" border-bottom: 1px solid #eeeeee">
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('common.SpareClassification') }}</Col><!-- 备件分类 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.sparePartsABC }}{{ detailObj.sparePartsVED }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.PurchasingQuantity') }}</Col><!-- 采购数量 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.purchaseCount }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.UnitPrice') }}</Col><!-- 采购单价 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.purchasePrice }}</Col>
              </Row>
            </Col>
          </Row>
          <Row style=" border-bottom: 1px solid #eeeeee">
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.InStorage') }}</Col><!-- 已入库数量 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.amountOfReceived }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.ToBeStored') }}</Col><!-- 待入库数量 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.amountOfToBeReceived }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('preliminary.OrderingDate') }}</Col><!-- 下单日期 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.orderDate }}</Col>
              </Row>
            </Col>
          </Row>
          <Row>
            <!--            <Col span="8">-->
            <!--              <Row>-->
            <!--                <Col class="basic-info-body-label" span="24">&nbsp;</Col>-->
            <!--                <Col class="basic-info-body-item" span="24"></Col>-->
            <!--              </Row>-->
            <!--            </Col>-->
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.ContractNo') }}</Col><!-- 合同编号 -->
                <Col class="basic-info-body-item" span="24">{{ detailObj.contractNo }}</Col>
              </Row>
            </Col>
            <Col span="8">
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('spareParts.contract') }}</Col><!-- 合同 -->
                <Col class="basic-info-body-item" span="24">
                  <div class="file-list" v-for="(item, index) in detailObj.attachments" :key="index">
                    <Tag color="blue" type="border" class="item-src" @click.native="handlePreview(item)">{{ item.fileName }}</Tag>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <Card :title="$t('spareParts.StorageInformation')" class="detail-content-layout mt16">
      <div class="basic-info">
        <!--        <div class="basic-info-title">-->
        <!--          <h2>{{ $t('spareParts.StorageInformation') }}</h2>&lt;!&ndash; 入库信息 &ndash;&gt;-->
        <!--        </div>-->
        <div class="basic-info-body-table tableContent">
          <Table :columns="columns" :data="infoList" />
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" />
          <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { infoApi,infoBeputinstorageApi } from "@/api/spareParts/procurement.js";
export default {
  name: "detailPurchaseModal",
  data() {
    return {
      params: {},
      detailObj: {},
      infoList:[],
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30, 40],
      total: 0,
      columns: [
        {
          // title: `${this.$t('common.SpareNumber')}`,
          title: `${this.$t('common.SpareNumber')}`,
          key: 'backupNo',
          align: 'center',

        },
        {
          //  title: `${this.$t('spareParts.Warehouse')}`,
          title: `${this.$t('spareParts.Warehouse')}`,
          key: 'warehouseName',
          align: 'center',
        },
        {
          //  title: `${this.$t('spareParts.Rack')}`,
          title: `${this.$t('spareParts.Rack')}`,
          key: 'shelfName',
          align: 'center',
        },
        {
          // title: `${this.$t('spareParts.Location')}`,
          title: `${this.$t('spareParts.Location')}`,
          key: 'locationName',
          align: 'center',
        },
        {
          // title: `${this.$t('spareParts.quantity')}`,
          title: `${this.$t('spareParts.quantity')}`,
          key: 'inputCount',
          align: 'center',
        },
        {
          //title: '入库人',
          title: `${this.$t('spareParts.WarehousePerson')}`,
          key: 'putInStorageByStr',
          align: 'center',
        },
        {
          // title: '入库时间',
          title: `${this.$t('spareParts.LibraryTime')}`,
          key: 'putInStorageTime',
          align: 'center',
        },
      ],
      // dataSource: [],
      // buyList: []
    }
  },
  created() {
    // this.detailObj.werksName = this.$route.query.werksName
    this.params = {
      // requestNo: this.$route.query.requestNo,
      // requestProject: this.$route.query.requestProject,
      // orderNo: this.$route.query.orderNo,
      // orderProject: this.$route.query.orderProject,
      purchaseId: this.$route.query.id,
    }
    console.log(this.params)
    this.getDetailList()
    this.searchList()
    // this.getUploadFile()
  },
  methods: {
    close() {
      this.$router.go(-1)
    },
    //文件预览
    handlePreview(item) {
      console.log(item.fileName);
      if (item) {
        window.open(this.util.filePathToUrl(item.filePath))
      }
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    getDetailList() {
      let params = {
        purchaseId:this.$route.query.id
      };
      infoApi(params).then(res => {
        if (res.code === 200) {
          this.detailObj = res.data
          // this.dataSource = res.data.dmsDeliveryList
          // this.detailObj.dmsDeliveryList.forEach(item => {
          //     item.menge = res.data.menge
          // });

        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    },
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        purchaseId:this.$route.query.id
      };
      infoBeputinstorageApi(params).then(res => {
        if (res.code === 200) {
          this.infoList = res.data.list
          this.total = res.data.total
          // this.dataSource = res.data.dmsDeliveryList
          // this.detailObj.dmsDeliveryList.forEach(item => {
          //     item.menge = res.data.menge
          // });

        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.basic-info {
  //margin-bottom: 50px;
  .basic-info-title {
    margin-bottom: 20px;
    height: 24px;
    span {
      display: inline-block;
      width: 7px;
      height: 24px;
      background: #187bdb;
    }

    h2 {
      display: inline-block;
      font-size: 16px;
      padding-left: 10px;
      position: relative;
      line-height: 24px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 24px;
        background: #187bdb;
      }
    }
  }

  .basic-info-body {
    //margin: 10px;
    color: #333;
    font-size: 13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    border: 2px solid  #f5f6f7;
    .basic-info-body-label {
      display: inline-block;
      width: 100%;
      height: 48px;
      line-height: 48px;
      background: #f5f6f7;
      text-align: left;
      padding:0 10px;
      /*border-left: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }

    .basic-info-body-label-file {
      display: inline-block;
      width:200px;
      min-height: 48px;
      line-height: 48px;
      background: #f5f6f7;
      text-align:  right;
      padding-left: 10px;
      /*border-left: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }

    .basic-info-body-item {
      display: inline-block;
      width: 60%;
      min-height: 48px;
      line-height: 48px;
      text-align: left;
      padding: 0 10px;
      //border-left: 1px solid #eee;
      // border-right: 1px solid #eee;
      /*border-right: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
    .file{
      color: #187bdb;
      cursor:pointer;
    }
    .file-content{
      min-height: 48px;
      display:flex;
      align-items:center;
      .file-list {
        width: 100%;
        height: 100%;
        word-wrap: break-word;
        .item-src {
          margin-left: 25px;
          line-height: 20px;
          color: #187bdb;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }

        .item-icon {
          width: 20%;
          display: inline-block;
          margin-top: 4px;
        }
      }
    }
  }
}

.over-wrapper {
  max-width: 199px;
  /*height: 23px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}
</style>
